<template>
  <div class="home">
    <div class="nav">
      <span>操作</span>
      <span>标题</span>
      <span></span>
      <span style="margin-left:460px">歌手</span>
      <span style="margin-left:232px">专辑</span>
      <span style="margin-left:280px">时间</span>
    </div>
    <div class="list">
      <li v-for=" (item,index) in songlist"
          :key="index"
          @dblclick="playList(index)">
        <div class="play">
          <span v-if="!isBtnShow && currentId==index&&musicId==item.id"
                class="active"><i class="iconfont icon-shengyin_shiti"></i></span>
          <span v-else>{{  updataIndex(index+1)}} </span>
        </div>
        <div class="like"
             @click=" getLike (item.id)">
          <i v-if="!isLiked(item.id)"
             class="iconfont icon-aixin"></i>
          <i v-else
             style="color: #ec4141"
             class="iconfont icon-aixin1"></i>
        </div>
        <div class="music-name">
          <span :class="{active:!isBtnShow && currentId==index&&musicId==item.id}">{{ item.name }}</span>
          <span v-if="item.fee == 1"
                class="vip-tag">VIP</span>
          <span v-if="item.mv !== 0"
                @click="toMvDeTail(item.mv)"
                class="vip-tag "
                style="color: #ec4949; border-color: #ec4949">MV<i class="el-icon-caret-right"></i></span>
        </div>
        <div class="author">
          <span class="artist-list"
                v-for="(a,index) in item.ar"
                :key="index">{{a.name }}</span>
        </div>
        <span style="position:absolute;left:920px ;width:180px ;">{{ item.al.name }}</span>
        <span style="position: absolute;left:1225px">{{(item.dt)|timeFormat }}</span>
      </li>
    </div>
  </div>
</template>

<script>
import { getLike } from "@/api/User"
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'ItemList',
  data () {
    return {
      userid: '',//用户id
      loading: true,
      // currentId: '',
    }
  },
  props: {
    songlist: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      likeList: (state) => {
        return state.user.likeList
      },
      isBtnShow: (state) => {
        return state.playlist.isBtnShow;
      },
      musicId: (state) => {
        return state.playlist.musicId
      },
      playlistIndex: (state) => {
        return state.playlist.playlistIndex;
      },
      playlist: (state) => {
        return state.playlist.playlist;
      },
    }),

  },
  methods: {
    // 去mv页
    toMvDeTail (id) {
      this.$router.push({ path: '/mvdetails', query: { mvid: id } })
    },
    // 是否喜欢
    isLiked (id) {
      return this.likeList.indexOf(id) !== -1
    },
    //用户点击喜欢歌曲加入喜欢
    async getLike (id) {
      var isLogin = JSON.parse(localStorage.getItem('isLogin'))
      if (!isLogin) return this.$message.error('需要登录')
      if (typeof id !== 'number') return
      let liked = this.isLiked(id)
      let res = await getLike(id, !liked)
      if (res.code !== 200) return this.$message.error(res.msg)
      this.$message.success(`${liked ? '取消喜欢' : '喜欢'}成功`)
      if (liked) {
        this.$store.commit('setLikeList', {
          type: 'remove',
          data: id
        })
      } else {
        this.$store.commit('setLikeList', {
          type: 'unshift',
          data: id
        })
        // this.$store.commit('UpLikelist', state.likeList)
      }
    },
    // 播放歌单
    playList (index) {
      this.$store.commit('updatedPlayList', this.songlist)
      this.$store.commit('updatedPlaylistIndex', index)
      this.$store.commit('upMusicId', this.songlist[index].id)
      //绑定全局事件总线‘currentId’
      this.$bus.$emit('currentId', this.songlist[index].id)
    },
    // 跟新歌单
    ...mapMutations(['updatedPlayList', 'updatedPlaylistIndex', 'upMusicId']),
    // 跟新index
    updataIndex (index) {
      var index = index < 10 ? ('0' + index) : index
      return index
    }
  },
  watch: {
    // 监视playlistIndex,改变播放样式
    playlistIndex: {
      immediate: true,
      handler (value) {
        this.currentId = value
      }
    },
  }
}
</script>

<style scoped lang="less">
.home {
  width: 1300px;
  margin-top: 10px;
  font-size: 13px;
  color: #666666;
  .nav {
    span {
      margin-left: 50px;
    }
  }
  .loding {
    width: 100%;
    height: 400px;
  }
  .list {
    margin-top: 10px;
    li {
      display: flex;
      width: 1300px;
      height: 30px;
      position: relative;
      .play {
        width: 20px;
        float: left;
        margin-left: 10px;
        text-align: center;
        color: #606266;
      }
      .active {
        color: #ec4141;
      }
      &:hover {
        background-color: #f5f5f5;
      }
      .like {
        margin-left: 2px;
        text-align: center;
        float: left;
        width: 65px;
        height: 30px;
        line-height: 30px;
      }
      span {
        white-space: nowrap; /*不换行强制文本在一行显示*/
        overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
        text-overflow: ellipsis; /*当文本溢出包含元素时发生的事情 ellipsis*/
        display: block;
        margin-top: 5px;
        float: left;
        line-height: 20px;
        text-align: left;
        height: 25px;
        cursor: pointer;
        z-index: 1000;
      }
      .music-name {
        display: flex;
        align-items: center;
        height: 30px;
        margin-left: 31px;
        width: 200px;
        .vip-tag {
          display: inline-block;
          box-sizing: border-box;
          border: 1px solid #fe672e;
          border-radius: 2px;
          color: #fe672e;
          margin-left: 10px;
          height: 14px;
          padding: 0 2px;
          line-height: 1;
          margin-top: 0;
        }
      }
      .author {
        width: 240px;
        height: 25px;
        float: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: absolute;
        z-index: 1000;
        left: 660px;
        color: #000;
      }
      .artist-list {
        &::after {
          display: inline;
          margin: 2px;
          content: "/";
        }
        &:last-of-type::after {
          content: "";
        }
      }
    }
  }
}
</style>